<template>
  <div>
    <div class="content">
      <!--医疗器械情况-->
      <div style="width: 100%">
        <div class="bname">医疗器械情况</div>
        <div class="block" style="margin-top: 0.5%;">
          <el-form ref="basicform" :model="basicForm" label-width="140px">
            <el-form-item label="类别" :rules="[{required: true, message: '类型未选择'}]">
              <el-radio-group v-model="basicForm.apparatusClassification" onclick="return false" >
                <el-radio label="01">设备类</el-radio>
                <el-radio label="02">耗材类</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="产品名称"   style="width: 600px">
              <el-input v-model="basicForm.apparatusProductName" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="注册证编号" style="width: 600px">
              <el-input v-model="basicForm.apparatusRegistrationNumber" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="型号" style="width: 600px">
              <el-input v-model="basicForm.apparatusModel" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="规格" style="width: 600px">
              <el-input v-model="basicForm.apparatusSpecifications" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="产品批号" style="width: 600px">
              <el-input v-model="basicForm.apparatusProductBatch" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="产品编号" style="width: 600px">
              <el-input v-model="basicForm.apparatusProductNumber" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="UDI" style="width: 600px">
              <el-input v-model="basicForm.apparatusUdi" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="生产日期">
              <el-date-picker
                v-model="basicForm.apparatusDateProduction"
                type="date"
                placeholder="选择日期"
                :readonly="true">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="有效日期">
              <el-date-picker
                v-model="basicForm.apparatusValidUntil"
                type="date"
                placeholder="选择日期"
                :readonly="true">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="上市许可持有人名称" style="width: 600px">
              <el-input v-model="basicForm.apparatusLicenseHolder" :readonly="true"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!--不良事件情况-->
      <div style="width: 100%; margin-top:1%;">
        <div class="bname" ref="block1" style="border-top: 1px solid rgba(165,169,175,0.29);padding-top:0.5%">不良事件情况
        </div>
        <div class="block" style="margin-top: 0.5%;">
          <el-form ref="basicform" :model="basicForm" label-width="140px">
            <el-form-item label="事件发生日期" >
              <el-date-picker
                v-model="basicForm.apparatusDateIncident"
                type="date"
                placeholder="选择日期"
                :readonly="true">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="发现或获知日期" >
              <el-date-picker
                v-model="basicForm.apparatusDiscoveryAcquisition"
                type="date"
                placeholder="选择日期"
                :readonly="true">
              </el-date-picker>
            </el-form-item>
<!--            <el-form-item label="伤害" :rules="[{required: true, message: '伤害未选择'}]">-->
<!--              <el-radio-group v-model="basicForm.apparatusHurt">-->
<!--                <el-radio label="死亡"></el-radio>-->
<!--                <el-radio label="严重伤害"></el-radio>-->
<!--                <el-radio label="其他"></el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
            <el-form-item label="伤害表现" style="width: 600px;">
              <el-input type="textarea" v-model="basicForm.apparatusInjuryPerformance" :rows="2" resize="none" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="附件图片" prop="images">
              <image-upload :limit="1" v-model="basicForm.apparatusInjuryPicture"  />
            </el-form-item>
            <el-form-item label="器械故障表现" style="width: 600px;">
              <el-input type="textarea" v-model="basicForm.apparatusEquipmentFailure" :rows="2" resize="none" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="附件图片" prop="images">
              <image-upload :limit="1" v-model="basicForm.apparatusFailurePicture" :readonly="true"  />
            </el-form-item>
            <el-form-item label="是否涉及患者">
              <el-radio-group v-model="basicForm.apparatusInvolvePatients" onclick="return false" >
                <el-radio label="01">是</el-radio>
                <el-radio label="02">否</el-radio>
              </el-radio-group>
            </el-form-item>
<!--            <div v-show="form.apparatusInvolvePatients == '是'">-->
<!--              <el-form-item label="诊疗类别">-->
<!--                <el-radio-group v-model="formEvent.apparatusDiagnoseType" :rules="[{required: true, message: '事件发生日期不能为空'}]">-->
<!--                  <el-radio label="急诊"></el-radio>-->
<!--                  <el-radio label="门诊"></el-radio>-->
<!--                  <el-radio label="住院"></el-radio>-->
<!--                </el-radio-group>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="姓名" style="width: 600px;">-->
<!--                <el-input v-model="formEvent.apparatusPatientName"></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="出生日期">-->
<!--                <el-date-picker-->
<!--                  v-model="formEvent.apparatusBirthDate"-->
<!--                  type="date"-->
<!--                  placeholder="选择日期">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="年龄">-->
<!--                <el-input v-model="formEvent.apparatusAge"></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="性别">-->
<!--                <el-radio-group v-model="formEvent.apparatusGender">-->
<!--                  <el-radio label="男"></el-radio>-->
<!--                  <el-radio label="女"></el-radio>-->
<!--                </el-radio-group>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="病历号">-->
<!--                <el-input v-model="formEvent.apparatusMedicalRecord"></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="既往病史" style="width: 600px;">-->
<!--                <el-input type="textarea" v-model="formEvent.apparatusPastHistory" :rows="2" resize="none"></el-input>-->
<!--              </el-form-item>-->
<!--            </div>-->
          </el-form>
        </div>
      </div>

      <!--使用情况-->
      <div style="width: 100%; margin-top:1%">
        <div class="bname" ref="block2" style="border-top: 1px solid rgba(165,169,175,0.29);padding-top:0.5%">使用情况</div>
        <div class="block" style="margin-top: 0.5%;">
          <el-form ref="basicform" :model="basicForm" label-width="140px">
            <el-form-item label="预期治疗疾病或作用" style="width: 600px;">
              <el-input type="textarea" v-model="basicForm.apparatusTreatmentEffect" :rows="2" resize="none" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="器械使用日期" >
              <el-date-picker
                v-model="basicForm.apparatusDateUseEquipment"
                type="date"
                placeholder="选择日期"
                :readonly="true">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="使用场所" >
              <el-radio-group v-model="basicForm.apparatusPlaceUse" onclick="return false">
                <el-radio label="01">医疗机构</el-radio>
                <el-radio label="02">家庭</el-radio>
                <el-radio label="03">其他</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="场所名称" style="width: 600px">
              <el-input v-model="basicForm.apparatusNamePlace" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="使用过程" style="width: 600px;" >
              <el-input type="textarea" v-model="basicForm.apparatusUsageProcess" :rows="2" resize="none" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="合并用药械情况说明" style="width: 600px;">
              <el-input type="textarea" v-model="basicForm.apparatusCombinedEquipment" :rows="2" resize="none" :readonly="true"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!--事件初步原因分析与处置-->
      <div style="width: 100%;  margin-top:1%">
        <div class="bname" ref="block3" style="border-top: 1px solid rgba(165,169,175,0.29);padding-top:0.5%">
          事件初步原因分析与处置
        </div>
        <div class="block" style="margin-top: 0.5%;">
          <el-form ref="basicform" :model="basicForm" label-width="140px">
            <el-form-item label="事件原因分析">
              <el-checkbox-group v-model="shijian" onclick="return false" >
                <el-checkbox label="01">产品原因(包括说明书等)</el-checkbox>
                <el-checkbox label="02">操作原因</el-checkbox>
                <el-checkbox label="03">患者自身原因</el-checkbox>
                <el-checkbox label="04">无法确定</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="事件原因分析描述" style="width: 600px;">
              <el-input type="textarea" v-model="basicForm.apparatusAnalysisDescription" :rows="3" resize="none" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="附件图片" prop="images">
              <image-upload :limit="1" v-model="basicForm.apparatusAnalysisPicture" :disabled="true" />
            </el-form-item>
            <el-form-item label="初步处置情况" style="width: 600px;" >
              <el-input type="textarea" v-model="basicForm.apparatusDisposalSituation" :rows="3" resize="none" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="附件图片" prop="images">
              <image-upload :limit="1" v-model="basicForm.apparatusDisposalPicture" :disabled="true"  />
            </el-form-item>


          </el-form>
        </div>
      </div>

      <!--事件结果-->
      <div style="width: 100%; margin-top:1%">
        <div class="bname" ref="block4" style="border-top: 1px solid rgba(165,169,175,0.29);padding-top:0.5%">事件结果</div>
        <div class="block" style="margin-top: 0.5%;">
          <el-form ref="reportform" :model="reportForm" label-width="140px">
            <el-form-item label="纠纷或纠纷隐患可能性">
              <el-radio-group v-model="reportForm.resultsPossibilityDispute" onclick="return false" >
                <el-radio label="01">确定有</el-radio>
                <el-radio label="02">可能有</el-radio>
                <el-radio label="03">无</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="事件严重程度">
              <div>
                <dict-tag style="font-size: 15px;color: #dd524d;font-weight: bold" :options="dict.type.he_event_severity" :value="reportForm.resultsEventSeverity"/>
              </div>
            </el-form-item>
            <el-form-item label="事件分级" style="width: 600px">
              <el-radio-group v-model="reportForm.resultsEventClassification" onclick="return false">
                <el-radio label="01" style="margin-top: 10px; margin-bottom: 10px">Ⅰ级事件: 发生错误，造成患者死亡 (包括损害程度I级)</el-radio>
                <el-radio label="02" style="margin-bottom: 10px">Ⅱ级事件: 发生错误，且造成患者伤害 (包括损害程度E、F、G、H级)</el-radio>
                <el-radio label="03" style="margin-bottom: 10px">Ⅲ级事件: 发生错误，但未造成患者伤害 (包括损害程度B、C、D级)</el-radio>
                <el-radio label="04">Ⅳ级事件: 错误未发生 (错误隐患)(包括损害程度A级)</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="伤害严重度">
              <el-radio-group v-model="reportForm.resultsSeverityInjury" onclick="return false">
                <el-radio label="01">死亡</el-radio>
                <el-radio label="02">极度严重</el-radio>
                <el-radio label="03">重度</el-radio>
                <el-radio label="04">中度</el-radio>
                <el-radio label="05">轻度</el-radio>
                <el-radio label="06">未造成伤害</el-radio>
                <el-radio label="07">无伤害</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import ScrollPane from "@/layout/components/TagsView/ScrollPane";
import { addBasic,getBasic } from "@/api/module/shao/shijian/basic";
export default {
  components: {ScrollPane},
  dicts: ['he_use_of_medications','he_event_severity','he_discussion_qualitative_levels','he_measure_strengthen_communication','he_measure_improve_administration','he_measure_care_management','he_measure_strengthen_education','he_possible_causes_environment','he_possible_causes_process_system','he_possible_causes_consumable_drug','he_possible_causes_equipment','he_discussion_medical_malpractice','he_discussion_involves_patient','he_education', 'he_patient_gender', 'he_party_post', 'he_report_event_state', 'he_report_event_type', 'he_patient_age_grades', 'he_event_severity', 'he_review_status', 'he_report_status', 'he_position', 'he_event_classification', 'he_review_event_type', 'he_possibility_of_dispute', 'he_patient_involved', 'he_analyze_reports', 'he_fallback_status', 'he_occurrence_time_period', 'he_event_determinatione', 'he_situation_measures_event', 'he_patient_education_level', 'he_diagnosis_category', 'he_years_of_experience', 'he_severity_of_injury', 'he_reporting_method', 'he_patient_nursing_level', 'he_date_type', 'he_invalidation_status', 'he_patient_ethnic_group', 'he_category', 'he_handling_status','he_possible_causes_workers','he_possible_causes_patient','he_possible_causes_family'],
  data() {
    return {
      shijian:[],
      formEvent:{
        heEventBasic: {},
        heEventReport: {},
        //代表事件流程表
        heEventFlow:{},
      },
      reportForm:{
        reportEventType:'23',
        reviewEventType:'01',
        resultsPossibilityDispute: '',
        resultsEventSeverity: '',
        resultsEventClassification: '',
        resultsSeverityInjury: '',
      },
      // 表单参数
      basicForm: {
        apparatusClassification: '',
        apparatusProductName: '',
        apparatusRegistrationNumber: '',
        apparatusModel: '',
        apparatusSpecifications: '',
        apparatusProductBatch: '',
        apparatusProductNumber: '',
        apparatusUdi: '',
        apparatusDateProduction: '',
        apparatusValidUntil: '',
        apparatusLicenseHolder: '',
        apparatusDateIncident: '',
        apparatusDiscoveryAcquisition: '',
        apparatusHurt: '',
        apparatusInjuryPerformance: '',
        apparatusInjuryPicture: '',
        apparatusEquipmentFailure: '',
        apparatusFailurePicture: '',
        apparatusInvolvePatients: '',
        apparatusDiagnoseType: '',
        apparatusPatientName: '',
        apparatusBirthDate: '',
        apparatusAge: '',
        apparatusGender: '',
        apparatusMedicalRecord: '',
        apparatusPastHistory: '',
        apparatusTreatmentEffect: '',
        apparatusDateUseEquipment: '',
        apparatusPlaceUse: '',
        apparatusNamePlace: '',
        apparatusUsageProcess: '',
        apparatusCombinedEquipment: '',
        apparatusAnalysisCause: '',
        apparatusAnalysisDescription: '',
        apparatusAnalysisPicture: '',
        apparatusDisposalSituation: '',
        apparatusDisposalPicture: '',
      },
      //代表事件流程表
      flowForm:{},
    }
  },
  // 禁止web端屏幕缩放
  created() {
    //获取上一个页面传过来的id
    const id = this.$route.query.id;
    //通过id查询
    getBasic(id).then(response => {
      //获取后台传过来的表单
      this.formEvent = response.data;
      //将其对应赋值进行表单渲染
      this.basicForm=this.formEvent.heEventBasic;
      this.shijian=this.pushCheckbox(this.basicForm.apparatusAnalysisCause);
      this.reportForm=this.formEvent.heEventReport;
    });
    // window.addEventListener("mousewheel", function (event) {
    //   if (event.ctrlKey === true || event.metaKey) {
    //     event.preventDefault();
    //   }
    // }, {passive: false})
  },
  methods: {
    //用于多选框反显
    pushCheckbox(str){
      if(str!=null){
        const boxlist=str.split(',');
        return boxlist;
      }
    },
    //返回按钮事件
    fanhui(){
      this.$router.push({path:'/tongjishangbao'});
    },
    //el 标签  speed 滚动速率 此处是50px 值越大滚动的越快
    goAssignBlock(el, speed) {
      let t = this.$refs[el].offsetTop - 100

      function scrollToTop() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

        if (scrollTop > t) {
          window.scrollTo(0, scrollTop - speed);

          // 使用 requestAnimationFrame 进行平滑滚动
          requestId = window.requestAnimationFrame(scrollToTop);
        } else {
          window.scrollTo(0, t);

          // 取消动画帧的请求
          window.cancelAnimationFrame(requestId);
        }
      }

      let requestId = window.requestAnimationFrame(scrollToTop);
    },
  },
}

</script>

<style lang="scss" scoped>
  @import "src/views/module/shao/blackFont";

  .sidebar {
  margin-left: 3%;
  width: 10%;
  float: left;
  display: flex;
}

.content {
  margin-right: 1.5%;
  width: 87%;
}

.btn-box {
  position: fixed;
  margin-top: 1%;

  ::v-deep .el-card__body {
    padding: 15px 15px 15px 5px;
  }
}

.btn-box button {
  text-align: left;
  padding: 0 0 0 10px;
  display: block;
  width: 180px;
  height: 40px;
  border: none;
  cursor: pointer;
}

.btn-box button:hover {
  background: hsl(221, 98%, 68%);
  color: white;
}

.block {
  border: 1px solid white;
  width: 100%;
  height: 100%;
  font-size: 5rem;
  box-sizing: border-box;

  .el-form-item {
    margin-bottom: 10px;
  }
}

.bname {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: black;

}

</style>
